import { CodeSurfer, CodeSurferColumns, Step } from "code-surfer";
import { nightOwl, dracula, oceanicNext, vsDark } from "@code-surfer/themes";

import { script } from "mdx-deck/themes";

<CodeSurfer>

```js 2 title="Hi" subtitle="foo class foo"
console.log(1);
console.log(2);
console.log(3);
```

</CodeSurfer>

---

<CodeSurferColumns>

<Step subtitle="First Step">

```js
console.log(1);
console.log(1);
console.log(1);
console.log(1);
console.log(1);
console.log(1);

console.log(1);
console.log(1);
console.log(1);
console.log(1);
console.log(1);
console.log(1);
console.log(1);
console.log(1);
console.log(1);
```

```js
console.log(1);
console.log(1);
console.log(1);
console.log(1);
console.log(1);
console.log(1);
console.log(1);
console.log(1);

console.log(1);
console.log(1);
console.log(1);
console.log(1);
console.log(1);
console.log(1);
console.log(1);
```

</Step>

<Step>

```diff

```

```diff

```

</Step>

<Step title="Second Step">

```diff

```

```diff

```

</Step>

<Step title="Third" subtitle="Step">

```diff

```

```diff

```

</Step>

</CodeSurferColumns>
